const componentMapping = {
  configForm: 'ConfigForm',
  form: 'ElForm',
  formItem: 'ElFormItem',
  input: 'ElInput',
  password: 'ElInput',
  number: 'ElInputNumber',
  textarea: 'ElInput',
  row: 'ElRow',
  col: 'ElCol',
  button: 'ElButton',
  select: 'ElSelect',
  option: 'ElOption',
  selectV2: 'ElSelectV2',
  switch: 'ElSwitch',
  time: 'ElTimePicker',
  timeSelect: 'ElTimeSelect',
  date: 'ElDatePicker',
  year: 'ElDatePicker',
  month: 'ElDatePicker',
  week: 'ElDatePicker',
  dateTime: 'ElDatePicker',
  dateRange: 'ElDatePicker',
  weekRange: 'ElDatePicker',
  monthRange: 'ElDatePicker',
  // yearRange: 'ElDatePicker',
  dateTimeRange: 'ElDatePicker',
  radioGroup: 'ElRadioGroup',
  radio: 'ElRadio',
  radioButton: 'ElRadioButton',
  checkboxGroup: 'ElCheckboxGroup',
  checkbox: 'ElCheckbox',
  cascader: 'ElCascader',
  rate: 'ElRate',
  slider: 'ElSlider',
  transfer: 'ElTransfer',
  upload: 'ElUpload',
  avatar: 'ElAvatar',
  badge: 'ElBadge',
  color: 'ElColorPicker',
  container: 'ElContainer',
  header: 'ElHeader',
  main: 'ElMain',
  footer: 'ElFooter',
  aside: 'ElAside',
  calendar: 'ElCalendar',
  card: 'ElCard',
  carousel: 'ElCarousel',
  carouselItem: 'ElCarouselItem',
  collapse: 'ElCollapse',
  collapseItem: 'ElCollapseItem',
  descriptions: 'ElDescriptions',
  descriptionsItem: 'ElDescriptionsItem',
  empty: 'ElEmpty',
  image: 'ElImage',
  progress: 'ElProgress',
  result: 'ElResult',
  skeleton: 'ElSkeleton',
  skeletonItem: 'ElSkeletonItem',
  table: 'ElTable',
  tableV2: 'ElTableV2',
  tableColumn: 'ElTableColumn',
  pagination: 'ElPagination',
  tag: 'ElTag',
  timeLine: 'ElTimeline',
  tree: 'ElTree',
  treeV2: 'ElTreeV2',
  treeSelect: 'ElTreeSelect',
  divider: 'ElDivider',
  affix: 'ElAffix',
  backTop: 'ElBacktop',
  breadcrumb: 'ElBreadcrumb',
  breadcrumbItem: 'ElBreadcrumbItem',
  dropdown: 'ElDropdown',
  dropdownMenu: 'ElDropdownMenu',
  dropdownItem: 'ElDropdownItem',
  menu: 'ElMenu',
  menuItemGroup: 'ElMenuItemGroup',
  menuItem: 'ElMenuItem',
  subMenu: 'ElSubMenu',
  icon: 'ElIcon',
  pageHeader: 'ElPageHeader',
  steps: 'ElSteps',
  step: 'ElStep',
  tabs: 'ElTabs',
  tabPane: 'ElTabPane',
  alert: 'ElAlert',
  dialog: 'ElDialog',
  drawer: 'ElDrawer',
  popconfirm: 'ElPopconfirm',
  popover: 'ElPopover',
  tooltip: 'ElTooltip',
  scrollbar: 'ElScrollbar',
  transition: 'Transition',
  transitionGroup: 'TransitionGroup',
  link: 'ElLink',
  autocomplete: 'ElAutocomplete',
  collapseTransition: 'ElCollapseTransition',
};

const emitMapping = {
  'update:modelValue': [
    'input',
    'password',
    'textarea',
    'select',
    'switch',
    'number',
    'selectV2',
    'time',
    'timeSelect',
    'radioGroup',
    'radio',
    'radioButton',
    'checkboxGroup',
    'checkbox',
    'cascader',
    'rate',
    'slider',
    'transfer',
    'color',
    'collapse',
    'treeSelect',
    'tabs',
    'dialog',
    'drawer',
    'date',
    'year',
    'month',
    'week',
    'dateTime',
    'dateRange',
    'weekRange',
    'monthRange',
    'yearRange',
    'dateTimeRange',
    'autocomplete',
  ],
  'update:visible': ['popover', 'tooltip'],
};

const placeholderMapping = {
  input: (label: string) => '请输入' + label,
  password: (label: string) => '请输入' + label,
  checkbox: (label: string) => '请选择' + label,
  checkboxGroup: (label: string) => '请选择' + label,
  radio: (label: string) => '请选择' + label,
  radioGroup: (label: string) => '请选择' + label,
  textarea: (label: string) => '请输入' + label,
  search: (label: string) => '请选择' + label,
  number: (label: string) => '请输入' + label,
  select: (label: string) => '请选择' + label,
  selectV2: (label: string) => '请选择' + label,
  time: (label: string) => '请选择' + label,
  timeSelect: (label: string) => '请选择' + label,
  cascader: (label: string) => '请选择' + label,
  treeSelect: (label: string) => '请选择' + label,
  date: (label: string) => '请选择' + label,
  year: (label: string) => '请选择' + label,
  month: (label: string) => '请选择' + label,
  week: (label: string) => '请选择' + label,
  dateTime: (label: string) => '请选择' + label,
};

const modelMapping = {
  input: 'modelValue',
  password: 'modelValue',
  textarea: 'modelValue',
  switch: 'modelValue',
  select: 'modelValue',
  number: 'modelValue',
  selectV2: 'modelValue',
  time: 'modelValue',
  timeSelect: 'modelValue',
  radio: 'modelValue',
  radioButton: 'modelValue',
  radioGroup: 'modelValue',
  checkbox: 'modelValue',
  checkboxGroup: 'modelValue',
  cascader: 'modelValue',
  rate: 'modelValue',
  slider: 'modelValue',
  transfer: 'modelValue',
  color: 'modelValue',
  treeSelect: 'modelValue',
  date: 'modelValue',
  year: 'modelValue',
  month: 'modelValue',
  week: 'modelValue',
  dateTime: 'modelValue',
  dateRange: 'modelValue',
  weekRange: 'modelValue',
  monthRange: 'modelValue',
  yearRange: 'modelValue',
  dateTimeRange: 'modelValue',
  dialog: 'modelValue',
  drawer: 'modelValue',
  tabs: 'modelValue',
  collapse: 'modelValue',
  autocomplete: 'modelValue',
};

const defaultValueMapping = {
  dialog: false,
  cascader: [],
};

const defaultRequiredRuleMapping = {
  '*'(config: { [key: string]: any }, message: string | string[]) {
    if (config.required) {
      return [
        {
          required: true,
          message: Array.isArray(message) ? message.join('-') : message,
          trigger: 'change',
        },
        {
          required: true,
          message: Array.isArray(message) ? message.join('-') : message,
          trigger: 'blur',
        },
      ];
    }
    return [];
  },
};

const UIFormMapping = {
  form: 'form',
  props: ['model', 'rules', 'validateOnRuleChange'],
};

export default {
  UIFormMapping,
  componentMapping,
  emitMapping,
  placeholderMapping,
  modelMapping,
  defaultValueMapping,
  defaultRequiredRuleMapping,
};
